import Loading from '@/components/Loading';
import { selectLayout } from '@/utils/selectLayout';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import { IRouteComponentProps, useSelector } from 'umi';
import BaseLayouts from './BaseLayouts';
import LoginLayouts from './LoginLayouts';

export interface LoadingState {
  global: boolean;
  effects: Record<string, boolean>;
  models: Record<string, boolean>;
}

const Layout = (props: IRouteComponentProps) => {
  const { children, history, location } = props;
  const layoutMap = { BaseLayouts, LoginLayouts };

  const loading = useSelector((state: { loading: LoadingState }) => {
    return state.loading;
  });

  const Container = layoutMap[selectLayout(location.pathname)];

  return (
    <ConfigProvider locale={zhCN}>
      <Container>
        <Loading isShow={loading.effects['user/login']} />
        {children}
      </Container>
    </ConfigProvider>
  );
};

export default Layout;
